<template>
  <view class="page-wrapper">
    <view class="container">
      <!-- Avatar section -->
      <view class="avatar-wrapper">
        <!-- <image class="avatar" src="https://via.placeholder.com/200/e8f7f7/333333?text=City" mode="aspectFill" /> -->
        <text class="username">瑞隆安</text>
      </view>

      <!-- Content section -->
      <view class="content-wrapper">
        <view class="text-wrapper">
          <text class="title">成为会员11，立享更多优惠福利</text>
          <text class="subtitle">授权绑定手机号为您提供更好服务</text>
        </view>
        
        <!-- Login button -->
        <button class="btn-login" hover-class="btn-hover" @tap="handleLogin">一键登录12</button>

        <!-- Terms and conditions -->
        <view class="agreement-wrapper">
          <view class="radio-wrapper" @tap="handleAgreementChange">
            <view :class="['radio-dot', isAgreed ? 'radio-active' : '']"></view>
          </view>
          <view class="agreement-text">
            已阅读并同意
            <text class="agreement-link" @tap="openServiceAgreement">《用户服务协议》</text>
            <text class="agreement-link" @tap="openPrivacyAgreement">《隐私协议》</text>
          </view>
        </view>
      </view>

      <!-- Skip login -->
      <view class="skip-wrapper" @tap="handleSkip">暂不登录</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isAgreed: false
    }
  },
  methods: {
    handleLogin() {
      if (!this.isAgreed) {
        wx.showToast({
          title: '请先同意服务协议和隐私协议',
          icon: 'none'
        })
        return
      }
      // 获取手机号
      wx.getUserProfile({
        desc: '用于完善会员资料',
        success: (res) => {
          console.log(res)
          // TODO: 处理登录逻辑
        },
        fail: (err) => {
          console.log(err)
        }
      })
    },
    handleAgreementChange() {
      this.isAgreed = !this.isAgreed
    },
    handleSkip() {
      wx.navigateBack()
    },
    openServiceAgreement() {
      wx.navigateTo({
        url: '/pages/agreement/service'
      })
    },
    openPrivacyAgreement() {
      wx.navigateTo({
        url: '/pages/agreement/privacy'
      })
    }
  }
}
</script>

<style>
.page-wrapper {
  width: 100%;
  min-height: 100vh;
  background: #fff;
}

.container {
  width: 100%;
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 160rpx 0 0;
}

.avatar {
  display: block;
  width: 140rpx;
  height: 140rpx;
  border-radius: 140rpx;
  background: #e8f7f7;
}

.username {
  display: block;
  margin-top: 20rpx;
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
}

.content-wrapper {
  width: 100%;
  padding: 0 32rpx;
  box-sizing: border-box;
  margin-top: 80rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.text-wrapper {
  width: 100%;
  text-align: center;
  margin-bottom: 60rpx;
}

.title {
  display: block;
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
}

.subtitle {
  display: block;
  margin-top: 12rpx;
  font-size: 26rpx;
  color: #999;
}

.btn-login {
  display: block;
  width: 486rpx;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  background: #4cd080;
  border-radius: 44rpx;
  color: #fff;
  font-size: 32rpx;
  font-weight: 500;
  border: none;
  margin: 0;
  padding: 0;
}

.btn-hover {
  opacity: 0.9;
}

.agreement-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20rpx;
  padding: 10rpx;
}

.radio-wrapper {
  width: 28rpx;
  height: 28rpx;
  border-radius: 28rpx;
  border: 1rpx solid #ccc;
  margin-right: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.radio-dot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 16rpx;
  background: transparent;
  transition: all 0.2s;
}

.radio-active {
  background: #4cd080;
}

.agreement-text {
  font-size: 24rpx;
  color: #666;
}

.agreement-link {
  color: #4cd080;
}

.skip-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 48rpx;
  text-align: center;
  font-size: 28rpx;
  color: #999;
  padding: 20rpx;
}
</style>